<!-- 房屋管理 -->
<template>
  <div>
    <div class="header">
      <div class="title" style="height: 65px">
        <div style="margin-bottom: 15px; width: 80%; float: left">
          <div style="width: 35%; float: left; margin-top: 15px; margin-left: 10px">
            <a-space style="margin-left: 10px">
              <span>开始时间：</span>
              <a-date-picker v-model:value="startDate" :format="dateFormat" />
            </a-space>
            <a-space style="margin-left: 10px">
              <span>结束时间：</span>
              <a-date-picker v-model:value="endDate" :format="dateFormat" />
            </a-space>
          </div>

          <div style="float: left; width: 8%; margin-top: 20px; margin-left: 15px">
            <a-space class="search-btn">
              <a-checkbox v-model:checked="checked">66个重点村</a-checkbox>
            </a-space>
          </div>
          <div style="float: left; width: 20%; margin-top: 15px; margin-left: 15px">
            <a-space class="search-btn">
              <a-button type="primary" style="line-height: 25px" @click="btnSeach">查询</a-button>
            </a-space>
          </div>
        </div>
        <div style="float: left; width: 20%">
          <a-space style="float: right; margin-right: 10px; margin-top: 15px">
            <a-button type="primary" @click="handleHourseExport"> 导出房屋台账 </a-button>
          </a-space>
          &nbsp;&nbsp;
          <a-space style="float: right; margin-right: 10px; margin-top: 15px">
            <a-button type="primary" @click="handleExport"> 导出</a-button>
          </a-space>
        </div>
      </div>
      <a-table
        :dataSource="tableData"
        :columns="displayColumns"
        :pagination="false"
        :scroll="{ x: 1500, y: detailTableHeight }"
        bordered
        :loading="loading"
      />
      <Detail
        v-model:visible="visible"
        title="抽屉标题"
        :width="1500"
        :detailTableHeight="detailTableHeight"
        :closable="true"
        :destroyOnClose="true"
        :data="detailData"
        :detailParams="detailParams"
        :currentqx="currentqx"
        :currentTitle="currentTitle"
        @close="handleClose"
      >
        <!-- <p>抽屉内容</p> -->
      </Detail>
      <hourseDetail
        v-model:visible="h_visible"
        title="抽屉标题"
        :width="1500"
        :detailTableHeight="detailTableHeight"
        :closable="true"
        :destroyOnClose="true"
        :data="detailData"
        :detailParams="h_detailParams"
        :currentqx="h_currentqx"
        :currentTitle="h_currentTitle"
        @close="handleHClose"
      >
        <!-- <p>抽屉内容</p> -->
      </hourseDetail>
      <!-- <BasicTable @register="registerTable">
          <template #id="{ record }"> </template>
      </BasicTable> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
  import moment from 'moment';
  import dayjs from 'dayjs';
  import { ref, reactive, toRefs, onMounted, onBeforeMount, computed } from 'vue';
  import { getLouDangerList } from '/@/api/demo/system'; //统计工作进展
  import { useUserStore } from '/@/store/modules/user';
  import { useRouter } from 'vue-router';
  import { iTableData, iTableColumns } from './types/table';
  import { iParams } from './types/params';
  import Detail from './component/detailDrawer.vue';
  import hourseDetail from './component/hourseDetail.vue';
  import { downloadByUrl } from '/@/utils/file/download';
  import { useGlobSetting } from '/@/hooks/setting';
  let userInfo = ref<any>(null);
  const visible = ref(false);
  const h_visible = ref(false);
  let detailData = ref<any[]>([]);
  const router = useRouter();
  let detailParams = ref({}); // 详情参数
  let h_detailParams = ref({}); // 详情参数
  let detailTableHeight = ref<number>(800); // 表格高度
  let tableHeight = ref<number>(0); // 表格高度
  let h_currentqx = ref<string>('');
  let h_currentTitle = ref<string>('');
  const dateFormat = 'YYYY-MM-DD';
  const startDate = ref<any>(null); // 开始时间
  const endDate = ref<any>(null); // 结束时间
  const checked = ref(false);
  let pageIndex = ref(1);
  let pageSize = ref(100);
  const userStore = useUserStore();
  const globSetting = useGlobSetting();
  let data = reactive<{
    tableData: iTableData[];
    tableColumns: iTableColumns[];
    wscolsList: { wch: number }[];
    id: number | any;
    loading: Boolean;
    keyWorld: String;
    currentqx: string; // 当前行政区名称
    currentTitle: string;

    cityToken: string | any;
    startTime: string;
    endTime: string;
  }>({
    // 表格数据
    tableData: [],
    tableColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        width: 80,
      },
      {
        title: '名称',
        align: 'center',
        width: 150,
        customCell: (row, index, column) => {
        
          let isNoHzyh = row.xzq !== '汇总' ? true : false;
          let style = 'cursor:pointer;text-decoration: underline; color: blue;';
          let isNoZero = row[column.key] !== 0 ? true : false;
          console.log('名称', checked.value);
          if (checked.value == true) {
            console.log('名称333', row.village);
            if (row.village != undefined) {
             return { innerHTML: `<span>${row.village}</span>` };
            }else
            {
              return { innerHTML: `<span>${row.xzq}</span>` };
            }
          } else {
            return {
              style: `${isNoHzyh === true && isNoZero ? style : ''}`,
              class: 'cell-hover',
              innerHTML: `<span style=${style} >${row.xzq}</span>`,
              onClick: async () => {
                getDetailData(row, index, column, isNoHzyh, isNoZero);
              },
            };
          }
        },
      },
      {
        title: '房屋总数(栋)',
        dataIndex: 'zcount',
        key: 'zcount',
        align: 'center',
        width: 120,
      },
      {
        title: '居住人口数',
        dataIndex: 'jzrks',
        key: 'jzrks',
        align: 'center',
        width: 120,
      },
      // 居住 商业
      {
        title: '租住人口数',
        dataIndex: 'zzrs',
        key: 'zzrs',
        align: 'center',
        width: 120,
      },
      {
        title: '房间数量',
        dataIndex: 'fjsl',
        key: 'fjsl',
        align: 'center',
        width: 100,
      },
      {
        title: '出租房间数量',
        dataIndex: 'jzfjs',
        align: 'center',
        width: 120,
      },
      {
        title: '一层房屋栋数',
        dataIndex: 'lc_dscount',
        key: 'lc_dscount',
        align: 'center',
        width: 120,
      },
      {
        title: '两层房屋栋数',
        dataIndex: 'lcjzsl',
        key: 'lcjzsl',
        align: 'center',
        width: 120,
		customCell: (row, index, column) => {
          let isNoHzyh = row.xzq !== '汇总' ? true : false;
          let style = 'cursor:pointer;text-decoration: underline; color: blue;';
          let isNoZero = row[column.key] !== 0 ? true : false;
          return {
            style: `${isNoHzyh === true && isNoZero ? style : ''}`,
            class: 'cell-hover',
            onClick: async () => {
              getDetailData_5(row, index, column, isNoHzyh, isNoZero);
            },
          };
        },
      },
	  
      {
        title: '三层及以上房屋栋数',
        dataIndex: 'csjyssl',
        key: 'csjyssl',
        align: 'center',
        width: 160,
		customCell: (row, index, column) => {
          let isNoHzyh = row.xzq !== '汇总' ? true : false;
          let style = 'cursor:pointer;text-decoration: underline; color: blue;';
          let isNoZero = row[column.key] !== 0 ? true : false;
          return {
            style: `${isNoHzyh === true && isNoZero ? style : ''}`,
            class: 'cell-hover',
            onClick: async () => {
              getDetailData_6(row, index, column, isNoHzyh, isNoZero);
            },
          };
        },
      },
      {
        title: '满足两条疏散路径数量',
        dataIndex: 'ssltdbfjsl',
        key: 'ssltdbfjsl',
        align: 'center',
        width: 180,
      },
      {
        title: '不满足两条疏散路径数量',
        dataIndex: 'no_ssltdbfjsl',
        key: 'no_ssltdbfjsl',
        align: 'center',
        width: 200,
        customCell: (row, index, column) => {
          let isNoHzyh = row.xzq !== '汇总' ? true : false;
          let style = 'cursor:pointer;text-decoration: underline; color: blue;';
          let isNoZero = row[column.key] !== 0 ? true : false;
          return {
            style: `${isNoHzyh === true && isNoZero ? style : ''}`,
            class: 'cell-hover',
            onClick: async () => {
              getDetailData_1(row, index, column, isNoHzyh, isNoZero);
            },
          };
        },
      },
      {
        title: '正在施工改造数量',
        dataIndex: 'zzsggz',
        key: 'zzsggz',
        align: 'center',
        width: 150,
        customCell: (row, index, column) => {
          let isNoHzyh = row.xzq !== '汇总' ? true : false;
          let style = 'cursor:pointer;text-decoration: underline; color: blue;';
          let isNoZero = row[column.key] !== 0 ? true : false;
          return {
            style: `${isNoHzyh === true && isNoZero ? style : ''}`,
            class: 'cell-hover',
            onClick: async () => {
              getDetailData_2(row, index, column);
            },
          };
        },
      },
      {
        title: '正在制定方案数量',
        dataIndex: 'zzzdfa',
        key: 'zzzdfa',
        align: 'center',
        width: 150,
        customCell: (row, index, column) => {
          let isNoHzyh = row.xzq !== '汇总' ? true : false;
          let style = 'cursor:pointer;text-decoration: underline; color: blue;';
          let isNoZero = row[column.key] !== 0 ? true : false;
          return {
            style: `${isNoHzyh === true && isNoZero ? style : ''}`,
            class: 'cell-hover',
            onClick: async () => {
              getDetailData_3(row, index, column, isNoHzyh, isNoZero);
            },
          };
        },
      },
      {
        title: '现有防护网数量',
        dataIndex: 'ckfhwggptzlsl',
        key: 'ckfhwggptzlsl',
        align: 'center',
        width: 150,
      },
      {
        title: '拆除防护网数量',
        dataIndex: 'ccfhwggptzlsl',
        key: 'ccfhwggptzlsl',
        align: 'center',
        width: 150,
      },
      {
        title: '现有电动自行车数量',
        dataIndex: 'bdfwjzrydddzxcsl',
        key: 'bdfwjzrydddzxcsl',
        align: 'center',
        width: 170,
      },
      {
        title: '灭火器数量',
        dataIndex: 'mhqsl',
        key: 'mhqsl',
        align: 'center',
        width: 130,
      },
      // 商业
      {
        title: '防烟逃生面罩数量',
        dataIndex: 'fytsmz',
        key: 'fytsmz',
        align: 'center',
        width: 170,
      },
      {
        title: '悬挂固定警示标牌栋数',
        dataIndex: 'xggdjsbpds',
        key: 'xggdjsbpds',
        align: 'center',
        width: 190,
      },
      {
        title: '未完成悬挂固定警示标牌栋数',
        dataIndex: 'no_xggdjsbpds',
        key: 'no_xggdjsbpds',
        align: 'center',
        width: 230,
        customCell: (row, index, column) => {
          let isNoHzyh = row.xzq !== '汇总' ? true : false;
          let style = 'cursor:pointer;text-decoration: underline; color: blue;';
          let isNoZero = row[column.key] !== 0 ? true : false;
          return {
            style: `${isNoHzyh === true && isNoZero ? style : ''}`,
            class: 'cell-hover',
            onClick: async () => {
              getDetailData_4(row, index, column, isNoHzyh, isNoZero);
            },
          };
        },
      },
      {
        title: '房屋烟感报警器数量',
        dataIndex: 'jzsyjyplmhxts',
        key: 'jzsyjyplmhxts',
        align: 'center',
        width: 190,
      },
      {
        title: '使用易燃可燃夹芯彩钢板搭建房屋栋数',
        dataIndex: 'wdwhjgfjgqsyyrkrgbdj',
        key: 'wdwhjgfjgqsyyrkrgbdj',
        align: 'center',
        width: 280,
      },
      {
        title: '疏散通道使用易燃可燃材料装修房屋栋数',
        dataIndex: 'sstdsyyrkrclzx',
        key: 'sstdsyyrkrclzx',
        align: 'center',
        width: 290,
      },
      {
        title: '不利于烟气扩散的顶棚南棚等房屋栋数',
        dataIndex: 'gryssdcsszblyyqksddp',
        key: 'gryssdcsszblyyqksddp',
        align: 'center',
        width: 280,
      },
    ],
    id: null,
    loading: true,
    keyWorld: '',
    cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
    currentqx: '', // 当前行政区名称
    currentTitle: '', // 当前详情标题
    wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
    endTime: '',
    startTime: '',
  });
  // 表格的 ref Dom名称
  let { tableData, loading, currentqx, currentTitle } = toRefs(data);
  async function getData() {
    const { role } = userInfo.value;
    if (startDate.value == null) {
      let currentDate = moment().format('YYYY-MM-DD');
      const start: any = dayjs('2024-01-01');
      const end: any = dayjs(currentDate);
      startDate.value = start;
      endDate.value = end;
      getTime();
    }
    let groupname = '';
    if (role === 'City') {
      groupname = 'qxmc';
    } else if (role === 'Area') {
      groupname = 'jzmc';
    } else if (role === 'Street') {
      groupname = 'czmc';
    }
    let params: iParams = {
      groupname: groupname,
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
      startime: moment(startDate.value.$d).format('YYYY-MM-DD'),
      endtime: moment(endDate.value.$d).format('YYYY-MM-DD'),
      cked: checked.value,
    };

    console.log('@市级参数', params);
    loading.value = true;
    let res: any = await getLouDangerList(params);
    console.log('@res--工作进入汇总表', checked.value);

    if (res || res.items.length > 0) {
      loading.value = false;
      // console.log('data', data);
      // 算列和
      let bullding_count = total(res.items, 'zcount');
      let jzrks_count = total(res.items, 'jzrks');
      let zzrs_count = total(res.items, 'zzrs');
      let index_count = res.items.length + 1;
      let three_cs_count = total(res.items, 'csjyssl');
      let two_cs_count = total(res.items, 'lcjzsl');
      let fjsl_count = total(res.items, 'fjsl');
      let jzfjs_count = total(res.items, 'jzfjs');
      let ywc_sstd_count = total(res.items, 'sstdywc');
      let wcc_sstd_zdfa_count = total(res.items, 'zzzdfa');
      let wcc_sstd_sgzg_count = total(res.items, 'zzsggz');
      let ckfhwggptzlsl_count = total(res.items, 'ckfhwggptzlsl');
      let bdfwjzrydddzxcsl_count = total(res.items, 'bdfwjzrydddzxcsl');
      let mhqsl_count = total(res.items, 'mhqsl');
      let fytsmz_count = total(res.items, 'fytsmz');
      let xggdjsbp_count = total(res.items, 'xggdjsbp');
      let jzsyjyplmhxts_count = total(res.items, 'jzsyjyplmhxts');
      // 商业
      let jzszlwxdlgybjqs_count = total(res.items, 'jzszlwxdlgybjqs');
      let wdwhjgfjgqsyyrkrgbdj_count = total(res.items, 'wdwhjgfjgqsyyrkrgbdj');
      let gryssdcsszblyyqksddp_count = total(res.items, 'gryssdcsszblyyqksddp');
      let lc_dscount = total(res.items, 'lc_dscount');
      let ssltdbfjsl = total(res.items, 'ssltdbfjsl');
      let no_ssltdbfjsl = total(res.items, 'no_ssltdbfjsl');
      let no_xggdjsbpds = total(res.items, 'no_xggdjsbpds');
      let xggdjsbpds = total(res.items, 'xggdjsbpds');
      let sstdsyyrkrclzx = total(res.items, 'sstdsyyrkrclzx');
      let allObj = {
        xzq: '汇总',
        zcount: bullding_count,
        jzrks: jzrks_count,
        zzrs: zzrs_count,
        index: index_count,
        csjyssl: three_cs_count,
        lcjzsl: two_cs_count,
        fjsl: fjsl_count,
        jzfjs: jzfjs_count,
        sstdywc: ywc_sstd_count,
        zzzdfa: wcc_sstd_zdfa_count,
        zzsggz: wcc_sstd_sgzg_count,
        ckfhwggptzlsl: ckfhwggptzlsl_count,
        bdfwjzrydddzxcsl: bdfwjzrydddzxcsl_count,
        fytsmz: fytsmz_count,
        xggdjsbp: xggdjsbp_count,
        jzsyjyplmhxts: jzsyjyplmhxts_count,
        jzszlwxdlgybjqs: jzszlwxdlgybjqs_count,
        wdwhjgfjgqsyyrkrgbdj: wdwhjgfjgqsyyrkrgbdj_count,
        sstdsyyrkrclzx: sstdsyyrkrclzx,
        gryssdcsszblyyqksddp: gryssdcsszblyyqksddp_count,
        mhqsl: mhqsl_count,
        lc_dscount: lc_dscount,
        ssltdbfjsl: ssltdbfjsl,
        no_ssltdbfjsl: no_ssltdbfjsl,
        no_xggdjsbpds: no_xggdjsbpds,
        xggdjsbpds: xggdjsbpds,
      };
      if (checked.value == true) {
        data.tableData = [...res.items];
      } else {
        data.tableData = [...res.items, allObj];
      }
    }
  }
  // 计算总数的方法
  function total(arr: any, item: any) {
    let total = arr.reduce((pre: any, cur: any) => {
      return parseInt(pre) + parseInt(cur[item]);
    }, 0);
    return total;
  }
  //已自查数量
  const getDetailData = async (
    row: any,
    index: number,
    column: any,
    isNoHzyh: boolean,
    isNoZero: boolean,
  ) => {
    if (isNoHzyh && isNoZero) {
      let params = {
        xzqdm: row.xzqdm,
        category: '1',
        startTime: moment(startDate.value.$d).format('YYYY-MM-DD'),
        endTime: moment(endDate.value.$d).format('YYYY-MM-DD'),
      };
      detailParams.value = params;
      console.log('detailParams', params);
      data.currentTitle = row.xzq;
      showDrawer();
    }
  };
  //获取当前区不满足两条疏散路径的房屋
  const getDetailData_1 = async (
    row: any,
    index: number,
    column: any,
    isNoHzyh: boolean,
    isNoZero: boolean,
  ) => {
    if (isNoHzyh && isNoZero) {
      router.push({
        path: 'hourseDetailLog',
        query: {
          xzq: row.xzq,
          xzqdm: row.xzqdm,
          category: '1',
          titlename: '不满足两条疏散路径的房屋',
          startTime: moment(startDate.value.$d).format('YYYY-MM-DD'),
          endTime: moment(endDate.value.$d).format('YYYY-MM-DD'),
        },
      });
    }
  };
  //正在施工改造数量
  const getDetailData_2 = async (row: any, isNoHzyh: boolean, isNoZero: boolean) => {
    if (isNoHzyh && isNoZero) {
      router.push({
        path: 'hourseDetailLog',
        query: {
          xzq: row.xzq,
          xzqdm: row.xzqdm,
          category: '2',
          titlename: '正在施工改造的房屋',
          startTime: moment(startDate.value.$d).format('YYYY-MM-DD'),
          endTime: moment(endDate.value.$d).format('YYYY-MM-DD'),
        },
      });
    }
  };
  //正在制定方案数量
  const getDetailData_3 = async (
    row: any,
    index: number,
    column: any,
    isNoHzyh: boolean,
    isNoZero: boolean,
  ) => {
    if (isNoHzyh && isNoZero) {
      router.push({
        path: 'hourseDetailLog',
        query: {
          xzq: row.xzq,
          xzqdm: row.xzqdm,
          category: '3',
          titlename: '正在制定方案的房屋',
          startTime: moment(startDate.value.$d).format('YYYY-MM-DD'),
          endTime: moment(endDate.value.$d).format('YYYY-MM-DD'),
        },
      });
    }
  };
  //未完成悬挂固定警示标牌栋数
  const getDetailData_4 = async (
    row: any,
    index: number,
    column: any,
    isNoHzyh: boolean,
    isNoZero: boolean,
  ) => {
    if (isNoHzyh && isNoZero) {
      router.push({
        path: 'hourseDetailLog',
        query: {
          xzq: row.xzq,
          xzqdm: row.xzqdm,
          category: '4',
          titlename: '未完成悬挂固定警示标牌的房屋',
          startTime: moment(startDate.value.$d).format('YYYY-MM-DD'),
          endTime: moment(endDate.value.$d).format('YYYY-MM-DD'),
        },
      });
    }
  };
  //两层
  const getDetailData_5 = async (
    row: any,
    index: number,
    column: any,
    isNoHzyh: boolean,
    isNoZero: boolean,
  ) => {
    if (isNoHzyh && isNoZero) {
      console.log('------------------', row);
      router.push({
        path: 'hourseDetailLog',
        query: {
          xzq: row.xzq,
          xzqdm: row.xzqdm,
          category: '5',
          titlename: '两层建筑',
          startTime: moment(startDate.value.$d).format('YYYY-MM-DD'),
          endTime: moment(endDate.value.$d).format('YYYY-MM-DD'),
        },
      });
    }
  };
  //三层及三层以上
  const getDetailData_6 = async (
    row: any,
    index: number,
    column: any,
    isNoHzyh: boolean,
    isNoZero: boolean,
  ) => {
    if (isNoHzyh && isNoZero) {
      router.push({
        path: 'hourseDetailLog',
        query: {
          xzq: row.xzq,
          xzqdm: row.xzqdm,
          category: '6',
          titlename: '三层及三层以上建筑',
          startTime: moment(startDate.value.$d).format('YYYY-MM-DD'),
          endTime: moment(endDate.value.$d).format('YYYY-MM-DD'),
        },
      });
    }
  };
  function getTime() {
    data.startTime = moment(startDate.value.$d).format('YYYY-MM-DD');
    data.endTime = moment(endDate.value.$d).format('YYYY-MM-DD');
    console.log('@查询参数 -- 开始时间', data.startTime);
    console.log('@查询参数 -- 结束时间', data.endTime);
  }
  function btnSeach() {
    getData();
  }
  function handleHClose() {
    h_visible.value = false;
    visible.value = false;
  }
  // 打开抽屉
  function showDrawer() {
    visible.value = true;
    h_visible.value = false;
  }
  function handleClose() {
    visible.value = false;
    h_visible.value = false;
  }
  function handleExport() {
    const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
    const tk = userStore.getToken;
    downloadByUrl({
		url:
        uriBase +
        '/export/hourse/informationExport?access_token=' +
        tk +
		'&cked='+checked.value+
        '&startTime=' +
        startDate.value.format('YYYY-MM-DD') +
        '&endTime=' +
        endDate.value.format('YYYY-MM-DD'),
      target: '_blank',
    });
  }
  function handleHourseExport() {
    const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
    const tk = userStore.getToken;
    downloadByUrl({
      url: `${uriBase}/export/hourse/hourseExport?access_token=${tk}`,
      target: '_blank',
    });
  }
  function getUserInfo() {
    const userStore = useUserStore();
    userInfo.value = userStore?.getUserInfo;
  }
  const displayColumns = computed(() => {
    const { role } = userInfo.value;
    let arr: any[] = [];
    if (role === 'City') {
      // qx
      arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'czmc');
      return arr;
    } else if (role === 'Area') {
      // jz
      arr = data.tableColumns.filter((item) => item.key !== 'czmc' && item.key !== 'qxmc');
      return arr;
    } else if (role === 'Street') {
      // cun
      arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'qxmc');
      console.log('@Aarr', arr);
      return arr;
    } else {
      return data.tableColumns;
    }
  });
  const getTableHeight = () => {
    setTimeout(() => {
      detailTableHeight.value = window.innerHeight - 182;
      tableHeight.value = window.innerHeight - 292;
    //   detailTableHeight.value = window.innerHeight;
    //   tableHeight.value = window.innerHeight;
      // console.log(`表格高度`, tableHeight.value);
    });
  };

  onBeforeMount(() => {
    getUserInfo();
  });
  onMounted(() => {
    console.log('******基本信息统计初始化******');
    getData();
    getTableHeight();
  });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  #map {
    height: calc(100vh - 140px);
  }

  .x-houseMng-search {
    z-index: 100;
    margin: 6px;
    position: absolute;
  }

  .root-house-mng-main {
    margin: 6px;
  }

  .x-village-tabs {
    //z-index: 100;
    //position: absolute;
    width: 60vw;
    margin-top: 6px;
    margin-left: 40px;
    //background-color: rgba(34, 34, 34, 0.6);
    :deep(.ant-form) {
      margin-top: 6px;
    }

    // :deep(.ant-form-item-label) > label {
    //   color: white;
    // }
  }
</style>
